<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>GSAP-Demo-index</title>
      
        <link href="GSAP-Demo.css" rel="stylesheet" type="text/css" />
        <script src="GSAP-Demo-js.js" type="text/javascript"> </script>
    </head>

    <body>
        <div id="featureBox"> </div>
        <div style="position:relative; width:936px; height:0px; overflow:visible; z-index:20;">
            <img src="http://www.greensock.com/_img/HTML5_corner_banner.png" alt="HTML5" style="position:absolute; top:-5px; right:-5px;" />
        </div>
        <div class="feature" id="featureAnimation">
            <div id="featureBackground" style="pointer-events:none;"> </div>
            <div class="featureTextWhite" id="whyGSAP">
                Why GSAP?
            </div>
            <div class="featureTextGreen" id="performance">
                Performance
            </div>
            <div class="featureTextWhite" id="compatibility">
                Compatibility
            </div>
            <div id="browserIcons">
                <img src="http://www.greensock.com/_img/browser-chrome-big.png" width="82" height="80" />
                <img src="http://www.greensock.com/_img/browser-safari-big.png" width="77" height="86"  />
                <img src="http://www.greensock.com/_img/browser-ie-big.png" width="82" height="74" />
                <img src="http://www.greensock.com/_img/browser-firefox-big.png" width="82" height="83" />
                <img src="http://www.greensock.com/_img/browser-opera-big.png" width="69" height="75" />
            </div>
            <div class="featureTextMinor" id="fallDown">
                Other tools fall down in older browsers, but GSAP is remarkably compatible.
            </div>
            <img id="anythingIcon" src="http://www.greensock.com/_img/animate-anything.png" width="102" height="108" style="position:absolute; top:50px; left:143px; display:block;" />
            <div id="transformBox" style="background-color:#91e600; width:130px; height:130px; position:absolute; top:40px; left:100px;"></div>
            <div class="featureTextWhite" id="transform" style="font-size:34px; width:640px; text-align:left; left:270px; top:80px; line-height:36px;">
                Scale, rotate & move independently
            </div>
            <div class="featureTextWhite" id="transformSub" style="font-size:16px; width:420px; text-align:left; left:270px; top:122px; color:#CCCCCC;">
                (impossible with CSS animations/transitions)
            </div>
            <div class="featureTextWhite" id="anything" style="width:620px; text-align:left; left:302px; top:63px;">
                XNJYHQLJYQEW
            </div>
            <div class="featureTextWhite" id="anythingSub" style="font-size:16px; width:390px; text-align:left; left:300px; top:122px; color:#CCCCCC;">
                CSS, canvas libraries, colors, beziers, etc.
            </div>
            <div class="featureTextWhite" id="control" style="text-align: left; top:64px; left:130px;">
                Total control
            </div>
            <div class="featureTextWhite" id="controlSub" style="font-size:16px; text-align:left; left:130px; top:122px; color:#CCCCCC;">
                pause(), play(), reverse(), or timeScale() any tween or sequence.
            </div>

            <div class="featureTextWhite" id="GSAP" style="top:60px;">
                GSAP
            </div>
            <div class="featureTextMinor" id="newStandardText" style="top:125px; text-align: center; width: 936px;">
                The new standard for HTML5 animation
            </div>
            <div id="featureClick" style="position:absolute; width:936px; height:220px;"><img src="http://www.greensock.com/_img/blank.gif" width="936" height="220" />
            </div>
            <div id="replay" style="text-align:right; position:absolute; left:825px; top:190px; cursor:pointer; color:#999999; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif; font-size:12px; width:100px; visibility:hidden;">
                replay <img id="replayIcon" src="http://www.greensock.com/_img/codepen/allDevicesBanner/replay.png" width="19" height="19" style="margin-left:2px; vertical-align: middle;" />
            </div>
            <div id="ctrl_slider"> </div>
        </div>
    </body>
</html>
